import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:interview/components/page/page_empty.dart';
import 'package:interview/components/page/page_list_custom.dart';
import 'package:interview/components/page/page_load.dart';
import 'package:interview/controller/optlist_controller.dart';
import 'package:interview/pages/opt/components/opt_item.dart';
import 'package:interview/theme/app_colors.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

class OptList extends StatefulWidget {
  final AppColors theme;
  final int optType;
  const OptList({super.key, required this.theme, required this.optType});

  @override
  State<OptList> createState() => _OptListState();
}

// 开启缓存组件
class _OptListState extends State<OptList> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true; // 保持页面状态
  // 下拉刷新和上拉加载控制器
  final RefreshController _refreshController = RefreshController(initialRefresh: false);
  final OptlistController optlistController = Get.put(OptlistController());
  late OptState _optState;

  @override
  void initState() {
    super.initState();
    _optState = optlistController.getPageState(widget.optType);
    WidgetsBinding.instance.addPostFrameCallback((_) {

      _loadMore();
    });
  }

  // 模拟加载更多数据
  void _loadMore() async {
    await optlistController.loadOptList(
      context: context, 
      optType: widget.optType, 
      questionBankType: 10
    );
    if(_optState.isFinished.value){
      _refreshController.loadNoData();
    }else{
      _refreshController.loadComplete();
    }
  }

  // 模拟刷新数据
  void _onRefresh() async {
    _refreshController.resetNoData();
    await optlistController.refreshOptList(
      context: context, 
      optType: widget.optType, 
      questionBankType: 10 
    );
    _refreshController.refreshCompleted();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context); 
    return  Obx((){
      final optList = _optState.optList;
      return SmartRefresher(
        controller: _refreshController,
        enablePullDown: true,
        enablePullUp: true,
        header: const ListCustomHeader(),
        footer:const ListCustomFooter(),
        onRefresh: _onRefresh,
        onLoading: _loadMore,
        child: optList.isEmpty?
          ( _optState.isFinished.value ? const PageEmpty(): const PageLoad(width: 2)):
          MasonryGridView.count(
          crossAxisCount: 2, // 两列
          mainAxisSpacing: 4, // 垂直间距
          crossAxisSpacing: 4, // 水平间距
          padding: EdgeInsets.symmetric(horizontal: 8),
          itemCount: optList.length,
          itemBuilder: (context, index) {
            final item = optList[index];
            return OptItem(
              id:item.id,
              ids:optList.map((e) => e.id).toList(),
              theme: widget.theme, 
              stem: item.stem, 
              subjectName: item.subjectName!, 
              creatorName: item.creatorName!, 
              createdAt: item.createdAt!, 
              creatorAvatar: item.creatorAvatar!, 
              difficulty: item.difficulty,
              questionType:item.questionType!
            );
          },
        )
      );
    });
  }
}